<template>
    <form>
      <table border="1" cellpadding="10" cellspacing="1" align="center">
        <tr rowspan="2">
          <td colspan="6" align="center">
            按品牌搜索：&nbsp;
            <select v-model="bid">
              <option :value="-1" >全部</option>
              <option :value="brand.id" v-for="(brand ,index) in brandList":key="index">{{brand.name}}</option>
            </select>
            &nbsp;
            <button @click.prevent="showComputer">查询</button>
          </td>
        </tr>
        <tr>
        <td>编号</td>
        <td>型号</td>
        <td>cpu处理器</td>
        <td>显卡</td>
        <td>价格</td>
        <td>品牌</td>
        </tr>
        <tr v-for="(computer,index) in computerList":key="index">
          <td>{{computer.id}}</td>
          <td>{{computer.name}}</td>
          <td>{{computer.cpu}}</td>
          <td>{{computer.graphic}}</td>
          <td>{{computer.price}}</td>
          <td>{{computer.brand.name}}</td>
        </tr>
      </table>
    </form>
</template>

<script>
    export default {
      name: "ShowComputer",
      data(){
          return{
            brandList:[],
            computerList:[],
            bid:-1
          }
      },
      methods:{
        showComputer(){
          this.axios({
            url:"computer/selectComputerByBrandId.do",
            methods:"get",
            params:{
              bid:this.bid
            }
          }).then((res)=>{
            this.computerList=res.data
          }),
            this.axios({
              url:"/brand/selectAllBrand.do",
              methods:"get",
            }).then((res)=>{
              this.brandList=res.data
            })
        }
      },
      created() {
        this.showComputer();
      }
    }
</script>

<style scoped>

</style>
